<template>
  <div class="app-container">
    <el-card :bordered="false">
      <el-form  ref="formValidate" :rules="ruleValidate" :model="formValidate" label-width="130px" >
        <el-row :gutter="24">
          <!-- 商品信息-->
          <el-col v-bind="grid2">
            <el-form-item label="商品名称：" prop="store_name">
              <el-input v-model="formValidate.store_name" placeholder="请输入商品名称"  />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品分类：" prop="cate_id">
              <el-select v-model="formValidate.cate_id" filterable :filter-method="dataFilter" clearable>
                <el-option v-for="item in optionsMetaShow" :disabled="item.disabled === 0"
                :value="item.value" :key="item.id" :label="item.label" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品关键字：" prop="">
              <el-input v-model="formValidate.keyword" placeholder="请输入商品关键字"  />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="单位：" prop="unit_name">
              <el-input v-model="formValidate.unit_name"  placeholder="请输入单位" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品简介：" prop="">
              <el-input v-model="formValidate.store_info" type="textarea" :rows="3" placeholder="请输入商品简介" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品封面图：" prop="image">
              <single-pic v-model="formValidate.image"  type="image" :num="1" :width="150" :height="150" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品轮播图：" prop="slider_image">
              <MaterialList v-model="formValidate.slider_image"  type="image" :num="4" :width="150" :height="150" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品规格：" props="spec_type">
              <el-radio-group v-model="formValidate.spec_type"  @change="changeSpec">
                <el-radio :label="0" class="radio">单规格</el-radio>
                <el-radio :label="1">多规格{{formValidate.spec_typ}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 多规格添加-->
          <el-col :span="24" v-if="formValidate.spec_type === 1" class="noForm">
            <el-col :span="24">
              <el-form-item label="选择规格：" prop="">
                <div  class="acea-row row-middle">
                  <el-select v-model="formValidate.selectRule" style="width: 23%;">
                    <el-option v-for="(item, index) in ruleList" :value="item.ruleName" :key="index">{{ item.ruleName }}</el-option>
                  </el-select>
                  <el-button type="primary" class="mr20" @click="confirm">确认</el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="attrs.length!==0">
                <div  v-for="(item, index) in attrs" :key="index">
                  <div class="acea-row row-middle"><span class="mr5">{{item.value}}</span>
                    <i class="el-icon-circle-close"  @click="handleRemoveRole(index)"></i>
                  </div>
                  <div class="rulesBox">
                    <el-tag type="dot" closable color="primary" v-for="(j, indexn) in item.detail" :key="indexn" :name="j" class="mr20" @close="handleRemove2(item.detail,indexn)">{{j}}</el-tag>
                    <el-input placeholder="请输入属性名称" v-model="item.detail.attrsVal"
                              style="width: 150px">
                      <el-button slot="append" type="primary" @click="createAttr(item.detail.attrsVal,index)">添加</el-button>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="createBnt">
              <el-form-item>
                <el-button type="primary" icon="md-add" @click="addBtn" class="mr15">添加新规格</el-button>
                <el-button type="success" @click="generate">立即生成</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="showIput">
              <el-col  :xl="6" :lg="9" :md="10" :sm="24" :xs="24" >
                <el-form-item label="规格：">
                  <el-input  placeholder="请输入规格" v-model="formDynamic.attrsName"  />
                </el-form-item>
              </el-col>
              <el-col  :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <el-form-item label="规格值：">
                  <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值"  />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="5" :md="10" :sm="24" :xs="24" >

                  <el-button type="primary"    @click="createAttrName">确定</el-button>
                  <el-button type="danger" @click="offAttrName" >取消</el-button>

              </el-col>
            </el-col>
            <!-- 多规格设置-->
            <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" v-if="manyFormValidate.length && formValidate.header.length!==0 && attrs.length!==0">
              <!-- 多规格表格-->
              <el-col :span="24">
                <el-form-item label="商品属性：" class="labeltop">
                  <el-table :data="manyFormValidate" size="small" style="width: 90%;">
                    <el-table-column type="myindex" v-for="(item,index) in formValidate.header" :key="index" :label="item.title" :property="item.slot" align="center">
                      <template slot-scope="scope">
                        <div v-if="scope.column.property == 'pic'" align="center">
                          <single-pic v-model="scope.row[scope.column.property]" type="image" :num="1" :width="60" :height="60" />
                        </div>
                        <div v-else-if="scope.column.property.indexOf('value') != -1" align="center">
                         {{ scope.row[scope.column.property] }}
                        </div>
                        <div v-else-if="scope.column.property == 'action'" align="center" >
                          <a @click="delAttrTable(scope.$index)" align="center">删除</a>
                        </div>
                        <div v-else align="center">
                          <el-input  v-model="scope.row[scope.column.property]" align="center" />
                        </div>
                      </template>
                    </el-table-column>

                  </el-table>
                </el-form-item>
              </el-col>
            </el-col>
          </el-col>
          <!-- 单规格表格-->
          <el-col :xl="23" :lg="24" :md="24" :sm="24" :xs="24" v-if="formValidate.spec_type === 0">
            <el-form-item >
              <el-table :data="oneFormValidate"  size="small" style="width: 90%;">
                <el-table-column prop="pic" label="图片" align="center">
                  <template slot-scope="scope">
                    <single-pic v-model="scope.row.pic" type="image" :num="1" :width="60" :height="60" />
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.price"/>
                  </template>
                </el-table-column>
                <el-table-column prop="cost" label="成本价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.cost"/>
                  </template>
                </el-table-column>
                <el-table-column prop="ot_price" label="原价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.ot_price"/>
                  </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.stock"/>
                  </template>
                </el-table-column>
                <el-table-column prop="bar_code" label="商品编号" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.bar_code"/>
                  </template>
                </el-table-column>
                <el-table-column prop="weight" label="重量（KG）" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.weight"/>
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="体积(m³)" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.volume"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品详情：">
              <ueditor-wrap v-model="formValidate.description" :config="myConfig"  @beforeInit="addCustomDialog"  style="width: 90%;"></ueditor-wrap>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-bind="grid">
            <el-form-item label="虚拟销量：">
              <el-input-number  :min="0" v-model="formValidate.ficti" placeholder="请输入虚拟销量"  />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="购买返回积分：">
              <el-input-number  v-model="formValidate.give_integral" :min="0" placeholder="请输入积分" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="排序：">
              <el-input-number :min="0"  v-model="formValidate.sort" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="商品状态：">
              <el-radio-group v-model="formValidate.is_show" >
                <el-radio :label="1" class="radio">上架</el-radio>
                <el-radio :label="0">下架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="热卖单品：">
              <el-radio-group v-model="formValidate.is_hot" >
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="猜你喜欢：">
              <el-radio-group v-model="formValidate.is_benefit" >
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="精品推荐：">
              <el-radio-group v-model="formValidate.is_best" >
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="首发新品：">
              <el-radio-group v-model="formValidate.is_new" >
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCates } from '@/api/shop/StoreCategory'
import { add, edit, getInfo, isFormatAttr } from '@/api/shop/StoreProduct'
import editor from '../../components/Editor'
import picUpload from '@/components/pic-upload'
import mulpicUpload from '@/components/mul-pic-upload'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import MaterialList from '@/components/material'
import singlePic from '@/components/singlematerial'
import UeditorWrap from 'vue-ueditor-wrap';
export default {
  components: { editor, picUpload, mulpicUpload, Treeselect, MaterialList, UeditorWrap, singlePic },
  data() {
    return {
      spinShow: false,
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      grid3: {
        xl: 18,
        lg: 18,
        md: 20,
        sm: 24,
        xs: 24
      },
      // 批量设置表格data
      oneFormBatch: [
        {
          pic: '',
          price: 0,
          cost: 0,
          ot_price: 0,
          stock: 0,
          bar_code: '',
          seckill_stock: 0,
          seckill_price: 0,
          pink_stock: 0,
          pink_price: 0,
          weight: 0,
          volume: 0,
          integral:0
        }
      ],
      // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: ''
      },
      formDynamicNameData: [],
      isBtn: false,
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: ''
      },
      columns: [],
      formValidate: {
        imageArr:[],
        sliderImageArr: [],
        store_name: '',
        cate_id: '',
        keyword: '',
        unit_name: '',
        store_info: '',
        image: '',
        slider_image: [],
        description: '',
        ficti: 0,
        give_integral: 0,
        sort: 0,
        is_show: 1,
        is_hot: 0,
        is_benefit: 0,
        is_best: 0,
        is_new: 0,
        is_good: 0,
        is_postage: 0,
        is_sub: 0,
        is_integral: 0,
        id: 0,
        spec_type: 0,
        temp_id: '',
        attrs: [],
        items: [
          {
            pic: '',
            price: 0,
            cost: 0,
            ot_price: 0,
            stock: 0,
            bar_code: '',
            integral:0
          }
        ],
        header: [],
        selectRule: ''
      },
      ruleList: [],
      templateList: [],
      createBnt: false,
      showIput: false,
      manyFormValidate: [],
      // 单规格表格data
      oneFormValidate: [
        {
          imageArr: [],
          pic: '',
          price: "0",
          cost:  "0",
          ot_price:  "0",
          stock:  "0",
          seckill_stock: 0,
          seckill_price: 0,
          pink_stock: 0,
          pink_price: 0,
          bar_code: '',
          weight:  "0",
          volume:  "0",
          brokerage: "0",
          brokerage_two: "0",
          integral: 0
        }
      ],
      images: [],
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      loading: false,
      treeSelect: [],
      optionsMetaShow: [],
      tableIndex: 0,
      ruleValidate: {
        store_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        cate_id: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        keyword: [
          { required: true, message: '请输入商品关键字', trigger: 'blur' }
        ],
        unit_name: [
          { required: true, message: '请输入单位', trigger: 'blur' }
        ],
        store_info: [
          { required: true, message: '请输入商品简介', trigger: 'blur' }
        ],
        spec_type: [
          { required: true, message: '请选择商品规格', trigger: 'change' }
        ],
        selectRule: [
          { required: true, message: '请选择商品规格属性', trigger: 'change' }
        ],
        temp_id: [
          { required: true, message: '请选择运费模板', trigger: 'change', type: 'number' }
        ]
      },
      attrs: []
    }
  },
  watch: {
    'formValidate.image': function(val) {
      console.log('aaaa:'+val)
      if (val) {
        this.oneFormValidate[0].pic = val
        console.log('bbbbbb:'+this.oneFormValidate.pic)
      }
    },
    'form.sliderImageArr': function(val) {
      if (val) {
        this.form.slider_image = val.join(',')
      }
    }
  },
  mounted () {
    this.getInfo();
  },
  methods: {
    dataFilter(val){
      this.value=val
      if(val){
        this.optionsMetaShow=this.treeSelect.filter((item=>{
          if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        }))
      }else{
        this.optionsMetaShow=this.treeSelect
      }
    },
    confirm () {
      let that = this;
      that.createBnt = true;
      if (that.formValidate.selectRule.trim().length <= 0) {
        return this.$message({
          message:'请选择属性',
          type: 'error'
        });
      }
      that.ruleList.forEach(function (item, index) {
        if (item.ruleName === that.formValidate.selectRule) {
          that.attrs = item.ruleValue;
        }
      });
    },
    // 删除表格中的属性
    delAttrTable (index) {
      this.manyFormValidate.splice(index, 1);
    },

    // 添加按钮
    addBtn () {
      this.clearAttr();
      this.createBnt = false;
      this.showIput = true;
    },
    // 立即生成
    generate () {
      isFormatAttr(this.formValidate.id, { attrs: this.attrs }).then(res => {
        this.manyFormValidate = res.data.value;
        let headerdel = {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 220
        };
        res.data.header.push(headerdel);
        this.formValidate.header = res.data.header;
        //this.formValidate.attrs = res.attr;
        let header = res.data.header;
        header.pop();
        if (!this.$route.params.id && this.formValidate.spec_type === 1) {
          this.manyFormValidate.map((item) => {
            item.pic = this.formValidate.image
          });
          this.oneFormBatch[0].pic = this.formValidate.image;
        }
      }).catch(res => {
        // this.$message({
        //   message:res.msg,
        //   type: 'error'
        // });
      })
    },
    // 取消
    offAttrName () {
      this.showIput = false;
      this.createBnt = true;
    },
    clearAttr () {
      this.formDynamic.attrsName = '';
      this.formDynamic.attrsVal = '';
    },
    // 删除规格
    handleRemoveRole (index) {
      this.attrs.splice(index, 1);
      this.manyFormValidate.splice(index, 1);
    },
    // 删除属性
    handleRemove2 (item, index) {
      item.splice(index, 1);
    },
    // 添加规则名称
    createAttrName () {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        let data = {
          value: this.formDynamic.attrsName,
          detail: [
            this.formDynamic.attrsVal
          ]
        };
        this.attrs.push(data);
        var hash = {};
        this.attrs = this.attrs.reduce(function (item, next) {
          hash[next.value] ? '' : hash[next.value] = true && item.push(next);
          return item
        }, [])
        this.clearAttr();
        this.showIput = false;
        this.createBnt = true;
      } else {
        this.$message.warning('请添加完整的规格！');
      }
    },
    // 添加属性
    createAttr (num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num);
        var hash = {};
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function (item, next) {
          hash[next] ? '' : hash[next] = true && item.push(next);
          return item
        }, [])
      } else {
        this.$message.warning('请添加属性！');
      }
    },

    // 改变规格
    changeSpec () {
    },
    // 详情
    getInfo () {
      let that = this;
      let id = that.$route.params.id || 0;
      getInfo(id).then(async res => {
        let data = res.data.productInfo;
        console.log('data:'+data)
        if(data){
          let cate_id = parseInt(data.cate_id) || 0;
          this.attrs = data.items || [];
          that.formValidate = data;
          that.formValidate.cate_id = cate_id;
          that.oneFormValidate = data.attrs;
          that.formValidate.header = [];
          that.generate();
          that.manyFormValidate = data.attrs;
          if(data.spec_type === 0){
            that.manyFormValidate = [];
          }else {
            that.createBnt = true;
            that.oneFormValidate = [
              {
                pic: '',
                price: '0',
                cost: '0',
                ot_price: '0',
                stock: '0',
                seckill_stock: '0',
                seckill_price: '0',
                pink_stock: '0',
                pink_price: '0',
                bar_code: '',
                weight:'0',
                volume:'0',
                brokerage:'0',
                brokerage_two:'0',
                integral:'0'
              }
            ]
          }
        }

        that.treeSelect = res.data.cateList;
        that.ruleList = res.data.ruleList;
        that.optionsMetaShow  = that.treeSelect

      }).catch(res => {
        console.log('err:'+res)
        return this.$message({
          message:res.msg,
          type: 'error'
        });
      })
    },


    // 提交
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if(this.formValidate.spec_type ===0 ){
            this.formValidate.attrs = this.oneFormValidate;
            this.formValidate.header = [];
            this.formValidate.items = [];
          }else{
            this.formValidate.items = this.attrs;
            this.formValidate.attrs = this.manyFormValidate;
          }
          if(this.formValidate.spec_type === 1 && this.manyFormValidate.length===0){
            return this.$message.warning('请点击生成规格！');
          }
          add(this.formValidate).then(async res => {
            this.$message({
              message:'操作成功',
              type: 'success'
            });
            setTimeout(() => {
              this.$router.push({ path: '/mall/goods' });
            }, 500);
          }).catch(res => {
            // this.$message({
            //   message:res.message,
            //   type: 'error'
            // });
          })
        } else {
          if(!this.formValidate.store_name || !this.formValidate.cate_id || !this.formValidate.keyword
            || !this.formValidate.unit_name || !this.formValidate.store_info
            || !this.formValidate.image || !this.formValidate.slider_image){
            this.$message.warning("请填写完整商品信息！");
          }
        }
      })
    },

    // 表单验证
    validate (prop, status, error) {
      if (status === false) {
        this.$message.warning(error);
      }
    },
    addCustomDialog () {
      window.UE.registerUI('yshop', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },


    cancel() {
      this.resetForm()
    }
  }
}
</script>

<style scoped lang="stylus">
  .submission
    margin-left 10px;
  .color-list .tip{
    color: #c9c9c9;
  }
  .color-list .color-item{
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color:#fff;
    margin-right :10px;
  }
  .color-list .color-item.blue{
    background-color: #1E9FFF;
  }
  .color-list .color-item.yellow{
    background-color: rgb(254, 185, 0);
  }
  .color-list .color-item.green{
    background-color: #009688;
  }
  .columnsBox
    margin-right 10px
  .priceBox
    width 100%
  .rulesBox
    display flex
    flex-wrap: wrap;
  .curs
    cursor pointer
</style>
